import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import type { User, Post } from '../lib/api';

interface UserState {
  currentUser: User | null;
  setCurrentUser: (user: User | null) => void;
}

interface PostsState {
  posts: Post[];
  setPosts: (posts: Post[]) => void;
  addPost: (post: Post) => void;
  updatePost: (id: number, post: Partial<Post>) => void;
  deletePost: (id: number) => void;
}

interface UIState {
  theme: 'light' | 'dark';
  sidebarOpen: boolean;
  loading: boolean;
  toggleTheme: () => void;
  setSidebarOpen: (open: boolean) => void;
  setLoading: (loading: boolean) => void;
}

// Combine all state interfaces
interface AppState extends UserState, PostsState, UIState {}

export const useStore = create<AppState>()(
  devtools(
    persist(
      (set) => ({
        // User state
        currentUser: null,
        setCurrentUser: (user) => set({ currentUser: user }, false, 'setCurrentUser'),

        // Posts state
        posts: [],
        setPosts: (posts) => set({ posts }, false, 'setPosts'),
        addPost: (post) => 
          set((state) => ({ posts: [post, ...state.posts] }), false, 'addPost'),
        updatePost: (id, updatedPost) =>
          set(
            (state) => ({
              posts: state.posts.map((post) =>
                post.id === id ? { ...post, ...updatedPost } : post
              ),
            }),
            false,
            'updatePost'
          ),
        deletePost: (id) =>
          set(
            (state) => ({
              posts: state.posts.filter((post) => post.id !== id),
            }),
            false,
            'deletePost'
          ),

        // UI state
        theme: 'light',
        sidebarOpen: true,
        loading: false,
        toggleTheme: () =>
          set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' }), false, 'toggleTheme'),
        setSidebarOpen: (open) => set({ sidebarOpen: open }, false, 'setSidebarOpen'),
        setLoading: (loading) => set({ loading }, false, 'setLoading'),
      }),
      {
        name: 'app-storage',
        // Only persist certain parts of the state
        partialize: (state) => ({
          currentUser: state.currentUser,
          theme: state.theme,
          sidebarOpen: state.sidebarOpen,
        }),
      }
    ),
    {
      name: 'app-store',
    }
  )
);

// Selector hooks for better performance
export const useCurrentUser = () => useStore((state) => state.currentUser);
export const useUserActions = () => useStore((state) => ({
  setCurrentUser: state.setCurrentUser,
}));

export const usePosts = () => useStore((state) => state.posts);
export const usePostActions = () => useStore((state) => ({
  setPosts: state.setPosts,
  addPost: state.addPost,
  updatePost: state.updatePost,
  deletePost: state.deletePost,
}));

export const useTheme = () => useStore((state) => state.theme);
export const useUIState = () => useStore((state) => ({
  theme: state.theme,
  sidebarOpen: state.sidebarOpen,
  loading: state.loading,
}));
export const useUIActions = () => useStore((state) => ({
  toggleTheme: state.toggleTheme,
  setSidebarOpen: state.setSidebarOpen,
  setLoading: state.setLoading,
})); 